<!--
 * @Date: 2023-01-10 11:50:02
 * @LastEditTime: 2023-02-18 16:20:14
 * @FilePath: /hash-guess-game/src/views/home/home.vue
 * 介绍:首页
-->
<script lang="ts" setup>
import { _require } from "@@/utils/tools/tools";
import arenaVue from "./components/arenaVue.vue";
import gameStrategy from "./components/gameStrategy.vue";
import hashInfo from "./components/hashInfo.vue";
import { addCache } from "@@/hooks/routeCache";
import { apiHomeData, HomeData } from "@@/api/module/home";
import PullRefresh from "@@/components/rework/pullRefresh/PullRefresh.vue";
import pubSub from "pubsub-js";
import useSysStore from "@@/store/useSysStore";
addCache("home");

const { isLogin } = useSysStore();
if (isLogin) onLogined();
pubSub.subscribeOnce("onLogined", onLogined);
function onLogined() {
  getHomeData();
}
const homeData = ref<HomeData.Res>();
/**获取主页数据 */
async function getHomeData() {
  const res = await apiHomeData();
  if (!res) return;
  if (res) return (homeData.value = res);
}
const PullRefreshRef = ref<InstanceType<typeof PullRefresh>>();
/**下拉刷新 */
async function onRefresh() {
  PullRefreshRef.value?.start();
  if (await getHomeData()) {
    return PullRefreshRef.value?.success();
  }
  PullRefreshRef.value?.fail();
}
</script>

<template>
  <div class="home">
    <PullRefresh ref="PullRefreshRef" @refresh="onRefresh">
      <div class="banner">
        <Mimage
          :src="_require('src/assets/img/home/qi-che.png')"
          height="380rem"
          fit="cover"
        />
      </div>
      <!-- 哈希统计 -->
      <hashInfo :homeData="homeData" />
      <!-- 竞技场 -->
      <arenaVue />
      <!-- 游戏攻略 -->
      <gameStrategy />
    </PullRefresh>
  </div>
</template>

<style lang="less" scoped>
.banner {
  margin: calc(0rem - var(--gap-md));
  margin-top: 100rem !important;
}
</style>
